<template>
	<view>
		<view class="check-item" @click="goCheckTicket(item)" v-for="item in checkList" :key="item.id">
			<view class="top">
				<text>{{item['检查点类型'] == 'room' ? item['地址'] : item['检查点名称']}}</text>
				<view v-if="item['巡检优先级'] == 3" class="priority high">优先级高</view>
				<view v-if="item['巡检优先级'] == 2" class="priority midium">优先级中</view>
				<view v-if="item['巡检优先级'] == 1" class="priority low">优先级低</view>
			</view>
			<view class="center">
				<text>检查点类型：</text>
				<text style="color: #888">{{checkPointType[item['检查点类型']]}}</text>
			</view>
			<view class="bottom">
				<text>检查点地址：</text>
				<text style="color: #888;">{{item['地址']}}</text>
			</view>
			<view v-if="isShowHandle" class="handle">去处理</view>
			<view v-if="isShowArrow" class="arrow"></view>
		</view>
	</view>
</template>

<script>
	export default {
		// props: ['checkList'],
		props: {
			checkList: {
				required: true
			},
			isShowHandle: {
				type: Boolean,
				default: true
			},
			isShowArrow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checkPointType: this.$type.checkPointType
			}
		},
		methods: {
			goCheckTicket(item) {
				this.$emit('detail', item)
			}
		}
	}
</script>

<style lang="scss">
	.check-item {
		background: #fff;
		// background-color: pink;
		position: relative;
		padding: 0rpx 35rpx 22rpx 35rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid #F8F8F8;
		.top {
			display: flex;
			font-size: 32rpx;
			align-items: center;
			&:before {
				display: inline-block;
				content: "";
				width: 6rpx;
				height: 32rpx;
				background-color: #3080FB;
				transform: translateX(-10rpx);
			}
			.priority {
				width: 84rpx;
				color: #E57544;
				border: 2rpx solid #F29B76;
				font-size: 18rpx;
				text-align: center;
				height: 28rpx;
				line-height: 24rpx;
				margin-left: 18rpx;
			}
			.priority.low {
				color: #eedca6;
				border: 2rpx solid #eedca6;
			}
			.priority.midium {
				color: #F29B76;
				border: 2rpx solid #F29B76;
			}
			.priority.high {
				color: #E57544;
				border: 2rpx solid #F29B76;
			}
		}
		.bottom {
			width: 20em;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.handle {
			width: 96rpx;
			height: 48rpx;
			background-color: #3699FF;
			color: #fff;
			position: absolute;
			// top: 55rpx;
			bottom: 65rpx;
			right: 20rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 48rpx;
		}
		.arrow {
			width: 24rpx;
			height: 24rpx;
			border-top: 2rpx solid #666;
			border-right: 2rpx solid #666;
			transform: rotate(45deg);
			position: absolute;
			top: 80rpx;
			right: 40rpx;
		}
	}
</style>
